<template>
  <div>
    <!-- 全局header -->
    <el-menu class="el-menu-demo header" :router=true :style="opacityStyle" mode="horizontal" :background-color="bgc"
      :text-color="textcolor" active-text-color="#ffd04b" :default-active="TagName">
      <el-menu-item index="" class="login">
        <el-dropdown @command="handleCommand">
          <span class="el-dropdown-link" :style="colorStyle" @click="log">
            {{nickname}}<i class="el-icon-arrow-down el-icon--right"></i>
          </span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item command="a" v-show="nickname!='点击登录'">退出登录</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </el-menu-item>
      <!-- <el-menu-item :index=item.index v-for="item in titleList" :key="item.index" v-show="item.isShow">
        {{item.name}}
      </el-menu-item> -->
      <!-- <el-menu-item index='/Source'>
        开放资源
      </el-menu-item> -->
      <el-menu-item index='/Admin' v-show="isAdmin">
        个人中心
      </el-menu-item>
      <el-menu-item index='/News'>
        新闻&公告
      </el-menu-item>
      <el-menu-item index='/Expert'>
        专家库
      </el-menu-item>
      <el-menu-item index='/Case'>
        案例中心
      </el-menu-item>
      <el-menu-item index='/Home' class="brand">首页</el-menu-item>
    </el-menu>
    <!-- 子页面 -->
    <keep-alive>
      <router-view />
    </keep-alive>
    <!-- 全局bottom -->
    <div class="bottom">
      <div class="content">
        <div class="address">地址：江苏省徐州市泉山区软件园路6号徐州软件园1号楼C座207室</div>
      </div>
      <div class="end">
        <div class="end-title">
          2020&copy;徐州格致企业管理创新发展研究院有限公司&nbsp;&nbsp;&nbsp;<a href="http://www.beian.miit.gov.cn">苏ICP备20041612号</a>
        </div>
      </div>
    </div>
  </div>

</template>

<script>
export default {
  name: 'HomeHeader',
  data () {
    return {
      headershow: false,
      headercontent: true,
      TagName: '/Home',
      opacityStyle: {
        opacity: 1
      },
      colorStyle: {
        color: 'black'
      },
      bgc: 'transparent',
      textcolor: 'black',
      activeIndex2: '1',
      nickname: '点击登录',
      role: '',
      token: '',
      titleList: [
        {
          index: '/Source',
          name: '开放资源',
          isShow: true
        },
        {
          index: '/Admin',
          name: '个人中心',
          isShow: false
        },
        {
          index: '/News',
          name: '新闻&公告',
          isShow: true
        }, {
          index: '/Expert',
          name: '专家库',
          isShow: true
        }, {
          index: '/Case',
          name: '成功案例',
          isShow: true
        }]
    }
  },
  methods: {
    getTop () {
      const top = document.documentElement.scrollTop
      if (top > 50) {
        this.bgc = '#545c64'
        this.textcolor = '#fff'
        let color = '#fff'
        this.colorStyle = { color }
        let opacity = top / 200
        opacity = opacity > 1 ? 1 : opacity
        this.opacityStyle = { opacity }
      } else {
        this.bgc = 'transparent'
        this.textcolor = 'black'
        let opacity = 1
        this.opacityStyle = { opacity }
        let color = 'black'
        this.colorStyle = { color }
      }
    },
    log () {
      if (this.nickname === '点击登录') {
        this.$router.push('/Login')
      }
    },
    handleCommand (command) {
      this.$axios({
        method: 'get',
        url: '/api/v1/logout',
        headers: {
          Authorization: 'Baerar ' + this.token
        }
      }).then((res) => {
        if (res.data.message === 'SUCCESS') {
          this.success('退出成功！')
          this.clearCookie()
          this.$router.push('/Login')
          location.reload()
        }
      })
    },
    success (text) {
      this.$notify({
        title: '成功',
        message: text,
        type: 'success'
      })
    },
    setCookie (name, value, day) {
      var Days = day
      var exp = new Date()
      exp.setTime(exp.getTime() + Days * 24 * 60 * 60 * 1000)
      document.cookie = name + '=' + escape(value) + ';expires=' + exp.toGMTString()
    },
    clearCookie: function () {
      this.setCookie('nickname', '', -1) // 修改2值都为空，天数为负1天就好了
      this.setCookie('username', '', -1)
      this.setCookie('id', '', -1)
      this.setCookie('token', '', -1)
      this.setCookie('role', '', -1)
      this.nickname = '点击登录'
    },
    getCookie: function () {
      if (document.cookie.length > 0) {
        var arr = document.cookie.split('; ') // 这里显示的格式需要切割一下自己可输出看下
        for (var i = 0; i < arr.length; i++) {
          var arr2 = arr[i].split('=') // 再次切割
          // 判断查找相对应的值
          if (arr2[0] === 'nickname') {
            this.nickname = unescape(arr2[1]) // 保存到保存数据的地方
          }
          if (arr2[0] === 'role') {
            this.role = unescape(arr2[1]) // 保存到保存数据的地方
          }
          if (arr2[0] === 'token') {
            this.token = unescape(arr2[1]) // 保存到保存数据的地方
          }
        }
      }
    }
  },
  computed: {
    isAdmin () {
      if (this.role === 'ROLE_ADMIN') {
        return true
      } else {
        return false
      }
    }
  },
  mounted () {
    this.getCookie()
  },
  activated () {
    window.addEventListener('scroll', this.getTop)
    this.getCookie()
  },
  watch: {
    $route: {
      handler (newRouter) {
        this.TagName = '/' + newRouter.name
      },
      immediate: true
    }
  }
}
</script>

<style scoped>
.header {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 99;
  width: 100%;
  font-weight: bold;
}
.el-menu-item {
  font-size: 16.5px;
}
.el-menu--horizontal > .el-menu-item {
  float: right;
}
.el-menu--horizontal > .el-submenu {
  float: right;
}
.brand {
  font-size: 20px;
  font-weight: normal;
}
el-menu {
  padding-right: 50px;
}
.bottom {
  height: 300px;
  background: #2e3e4f;
}
.content {
  height: 250px;
  text-align: center;
  overflow: hidden;
}
.end {
  border-top: blanchedalmond 1px solid;
  height: 50px;
  text-align: center;
}
.end-title {
  line-height: 20px;
  color: white;
  font-size: 16px;
  margin: 15px 0;
}
a {
  text-decoration: none;
  color: white;
}
.address {
  font-size: 18px;
  line-height: 1.8;
  color: white;
  margin: 113px 0;
}
.login {
  max-width: 150px;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
.el-dropdown-link {
  cursor: pointer;
}
.el-icon-arrow-down {
  font-size: 15px;
}
</style>
